<template>
  <view v-if="show" class="mt-modal">
    <!-- 简洁模式 -->
    <view v-if="options.model === 'concise'" class="mt-modal-concise_content">
      <view v-if="options.showTitle" class="mt-modal-title">{{ options.title }}</view>
      <view class="mt-modal-body" :style="{ 'text-align': options.contentAlign, 'padding-top': options.showTitle ? '0' : '40rpx' }">
        <view v-if="!options.slot">{{ options.content }}</view>
        <view v-else>
          <slot></slot>
        </view>
      </view>
      <view v-if="options.showFooter" class="mt-modal-footer">
        <view v-if="options.showCancel" class="mt-modal-footer_btn cancel" @click="handleConciseCancel">{{ options.cancelText }}</view>
        <view class="mt-modal-footer_btn" @click="handleConciseConfirm">{{ options.confirmText }}</view>
      </view>
    </view>
    <!-- 自定义弹窗模式 -->
  </view>
</template>

<script setup>
const show = ref(false);

const options = ref();
function open(option = {}) {
  const defaultOption = {
    model: 'concise', // concise 简洁模式
    title: '系统提示',
    showTitle: true,
    content: '',
    slot: false, // slot 模式
    contentAlign: 'left',
    showCancel: true,
    showFooter: true,
    cancelText: '取消',
    confirmText: '确定',
    success: null
  };
  options.value = Object.assign(defaultOption, option);

  show.value = true;
}

function close() {
  show.value = false;
}

function handleConciseCancel() {
  if (options.value.success) {
    close();
    options.value.success({ confirm: false, cancel: true });
  } else {
    close();
  }
}

function handleConciseConfirm() {
  if (options.value.success) {
    close();
    options.value.success({ confirm: true, cancel: false });
  } else {
    close();
  }
}

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.mt-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  // padding-top: 40vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .mt-modal-concise_content {
    width: 75%;
    margin: 0 auto;
    border-radius: 16rpx;
    background-color: #ffffff;
    box-sizing: border-box;
    .mt-modal-title {
      font-size: 32rpx;
      color: #1c213e;
      font-weight: bold;
      text-align: center;
      padding: 40rpx 32rpx 20rpx;
    }
    .mt-modal-body {
      min-height: 100rpx;
      font-size: 32rpx;
      color: #1c213e;
      padding: 0 32rpx 30rpx;
    }
    .mt-modal-footer {
      display: flex;
      border-top: 2rpx solid #d7dbe1;
      .mt-modal-footer_btn {
        flex: 1;
        height: 96rpx;
        line-height: 96rpx;
        font-size: 40rpx;
        color: $mt-color-primary;
        text-align: center;
        box-sizing: border-box;
        &.cancel {
          color: #666666;
          border-right: 2rpx solid #d7dbe1;
        }
      }
    }
  }
}
</style>
